<!-- 登陆 -->
<template>
  <div>
    <el-card class="box-card" shadow="always" :body-style="{ padding: '0px' }">
      <!-- 左边form -->
      <div class="comtaint-left">
        <div class="comtaint-logo">
          <img src="@/assets/img/logo.png" alt="">
        </div>
        <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" style="margin-left:-41px;">
          <el-form-item prop="pass" class="input-magin">
            <div class="divIcon">
              <span class="svg-container el-icon-mobile-phone" />
            </div>
            <input v-model="ruleForm.mobile" type="text" placeholder="请输入内容" class="el-input__inner">
          </el-form-item>
          <el-form-item prop="checkPass">
            <div class="divIcon">
              <span class="svg-container el-icon-lock" />
            </div>
            <input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password class="el-input__inner">
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item class="admitBtn">
            <el-button type="primary" class="btnTn" @click="submitForm()">立即登陆</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 右边图片 -->
      <div class="comtaint-right">
        <img src="@/assets/img/登陆.png" alt="">
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      ruleForm: {
        mobile: 'admin',
        password: 111111
      },
      rules: {
        mobile: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
          // { pattern: /^1[3-9]\d{9}$/, message: '请输入合法的用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, message: '请输入正确的密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return
        this.$router.push('/')
        this.$store.dispatch('user/fetchLogin', this.ruleForm)
        this.$message.success('登陆成功')
      })
    }
  }

}

</script>
<style lang='scss' scoped>
.box-card{
  width: 958px;
    height: 516px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 20px rgb(93 93 93 / 33%);
    background-color: #fff;
    border-radius: 40px;
}
.comtaint-left {
  float: left;
  width: 398px;
  height: 516px;
  background: #fff;
  border-radius: 34px 0 0 34px;
  margin: 0 auto;
}
.comtaint-logo {
  display: block;
  margin-left: 124px;
  margin-top: 72px;
}
.comtaint-logo img {
  width: 150px;
  height: 64px;
  }
.input-magin {
  margin-top: 50px;

}
.divIcon {
  float: left;
  width: 50px;
  height: 50px;
  background: #eae7e7;
  border-radius: 8px 0 0 8px;
}
 .el-icon-mobile-phone {
  width: 25px;
  height: 24px;
  font-size: 25px;
  margin: 12px 13px;
}
.el-icon-lock {
  width: 25px;
  height: 24px;
  font-size: 25px;
  margin: 12px 13px;
}
.el-input__inner {
    width: 230px;
    height: 50px;
    background-color: #f8f5f5;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.admitBtn {
  margin-top: 23px;
  // margin-left: 59px;
}
.btnTn {
    width: 280px;
    height: 50px;
    background: #ffb200;
    border-radius: 8px;
    // box-shadow: 0 2px 9px 1px rgb(255 178 0 / 47%);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #332929;
    line-height: 22px;
}
.comtaint-right {
  display: block;
  float: right;
}
.comtaint-right img {
  width: 555px;
  height: 516px;
}
</style>
